import React from 'react';
import styles from '../style/toplist.scss';
import Page from './page.js';
import NavLink from '../modules/NavLink'
import cookie from '../js/jquery.cookie.js'
import jQuery from '../js/jquery';
export default class ListItem extends React.Component {
	constructor(props){
        super(props)
        this.state={
        	indexList : [],
            totalData:[],
            totalNum : 0,
            current : 1,
            pageSize : 5,
            goValue:'',
            totalPage : 0,
        }
    }

     //点击翻页
   	pageClick(pageNum,e){
        let that = this;
       	if(pageNum != that.state.current){
           	that.state.current = pageNum
       	}
       	that.state.indexList=[];//清空之前的数据
       	for(var i = (pageNum - 1) * that.state.pageSize; i< that.state.pageSize * pageNum; i++){
           	if(that.state.totalData[i]){
               that.state.indexList.push(that.state.totalData[i])
           	}
       	}
       	that.setState({indexList:that.state.indexList})
       //console.log(that.state.indexList)
    }
    //上一步
    goPrevClick(){
        var that = this;
        let cur = this.state.current;
        if(cur > 1){
            that.pageClick( cur - 1);
        }
    }
    //下一步
    goNext(){
        var that = this;
        let cur = that.state.current;
        if(cur < that.state.totalPage){
            that.pageClick(cur + 1);
        }
    }

    detail(){
        $('.listSong').click(function(){
            var num=($(this).attr('x'));
            addCookie('detailKey',num,7)
        })
        // $('.listSong').each(function(i,d){
        //  console.log($('.listSong').eq(i).attr('x'));  
        // });
        
        // console.log( $('.listSong').length);
        // console.log(this.getAttribute('x'))
        // addCookie('detailKey',service.song,7);
    }
	render(){
        const serviceShows = this.state.indexList.map((service,index)=>{
            if(service.id<4){
                return  <li   key = {index} >
                        <p className={styles.rank}>
                            <span className={`${styles.rankNum} ${styles.rankno3}`}>{service.id}</span>
                            <span className={styles.rankAdd}>
                                <i className="icon iconfont icon-shangsheng"></i><br />{service.rank}
                            </span>
                        </p>
                        <p className={styles.songDetail} >
                            <a className={styles.imgUrl} href="javascript:;">
                                <img src={service.img}/>
                            </a>
                            <span className={styles.songName}><NavLink to="/detail" className={'listSong'} x={service.id} onMouseOver={this.detail.bind(this)}>{service.song}</NavLink></span>
                        </p>
                        <p className={styles.singerName}>
                            <a href="javascript:;">{service.singer}</a>
                        </p>
                        <p className={styles.singerTimes}>{service.time}</p>
                    </li>
            }else{
                return  <li key = {index}>
                        <p className={styles.rank}>
                            <span className={styles.rankNum}>{service.id}</span>
                            <span className={styles.rankAdd}>
                                <i className="icon iconfont icon-shangsheng"></i><br />{service.rank}
                            </span>
                        </p>
                        <p className={styles.songDetail}>
                            <a className={styles.imgUrl} href="javascript:;">
                                <img src={service.img}/>
                            </a>
                            <span className={styles.songName}><NavLink to="/detail" className={'listSong'} x={service.id} onMouseOver={this.detail.bind(this)}>{service.song}</NavLink></span>
                        </p>
                        <p className={styles.singerName}>
                            <a href="javascript:;">{service.singer}</a>
                        </p>
                        <p className={styles.singerTimes}>{service.time}</p>
                    </li>
            }
            
        })
        return(
            <div>
                {serviceShows}
                <Page total={this.state.totalNum}
                          current={this.state.current}
                          totalPage={this.state.totalPage}
                          goValue={this.state.goValue}
                          pageClick={this.pageClick.bind(this)}
                          goPrev={this.goPrevClick.bind(this)}
                          goNext={this.goNext.bind(this)}/>
            </div>
        )
    }
    componentWillMount(){
    	var that = this;
    	var ajaxData = {
    		type : 'get',
    		url : 'http://www.genzqi.online/qqmusic/php/fashionData.php',
    	}
    	var ajax=new XMLHttpRequest();
		ajax.open(ajaxData.type,ajaxData.url,true);
		ajax.send();
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4 && ajax.status==200){
				var arr=JSON.parse(ajax.responseText);
				that.setState({
                    totalData : arr,
                    totalNum : arr.length,
                });
                let totalPage = Math.ceil(that.state.totalNum/that.state.pageSize);
                that.setState({
					totalPage : totalPage
				});
				that.pageClick(1);
			}
		}
    }
}